<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	.ui-dialog *
    {
        font-family:Tahoma;
        font-size:11px;
    }
    .ui-dialog form#crud-form
    {
        margin-top:20px;
    }
    .ui-dialog form#crud-form input
    {
        width:230px;
        overflow:visible;/*fix for IE*/
    }
    .ui-dialog form#crud-form td.label
    {
        font-weight:bold;padding-right:5px;
    }
    div.pq-grid-toolbar-crud
    {
        text-align:center;
    }
	</style>

<script>
    $(function () {

        var tbl = $("#nasdaq_market_table");
        var obj = $.paramquery.tableToArray(tbl);

        var newObj = { 
            width: 900, 
            height: 460, 
            editable: false,
            pageModel: { type: "local", rPP: 15, rPPOptions: [10, 15, 20, 50, 100] },
            flexHeight: true,
            title: "Companies listed on the <b>NASDAQ</b>",
            freezeCols: 1,
            resizable: true,            
            editModel: { clicksToEdit: 2 },
            selectionModel: { mode: 'single', type: 'row' }
        };

        newObj.dataModel = { data: obj.data };
        newObj.colModel = obj.colModel;

        newObj.colModel[0].width = 220;
        newObj.colModel[1].width = 100;
        newObj.colModel[2].hidden = true;
        $.extend(newObj.colModel[3], {
            render: function (ui) {
                var rowData = ui.rowData;
                if (rowData[4] < 0) {
                    return "<img src='/Content/images/arrow-us-down.gif'/>&nbsp;" + rowData[3];
                }
                else if (rowData[4] > 0) {
                    return "<img src='/Content/images/arrow-us-up.gif'/>&nbsp;" + rowData[3];
                }
                else {
                    return rowData[3];
                }
            }, width: 100, editable: false
        });
        newObj.colModel[4].width = 120;
        $.extend(newObj.colModel[5], { width: 120, dataType: "float" });
        newObj.colModel[6].width = 166;

        //define the toolbar
        newObj.toolbar = {
            items: [
                { type: 'button', label: 'Add', listeners: [{ click: addRow}], icon: 'ui-icon-plus' },
                { type: 'button', label: 'Edit', listeners: [{ click: editRow}], icon: 'ui-icon-pencil' },
                { type: 'button', label: 'Delete', listeners: [{ click: deleteRow}], icon: 'ui-icon-minus' }
            ]
        };

        var $grid = $("#grid_crud").pqGrid(newObj);
        //create popup dialog.
        $("#popup-dialog-crud").dialog({ width: 400, modal: true,
            open: function () { $(".ui-dialog").position({ of: "#grid_crud" }); },
            autoOpen: false
        });
        //edit Row
        function editRow() {
            var rowIndx = getRowIndx();
            if (rowIndx != null) {

                var row = $grid.pqGrid('getRowData', {rowIndx: rowIndx});

                var $frm = $("form#crud-form");
                $frm.find("input[name='company']").val(row[0]);
                $frm.find("input[name='symbol']").val(row[1]);
                $frm.find("input[name='price']").val(row[3]);
                $frm.find("input[name='change']").val(row[4]);
                $frm.find("input[name='pchange']").val(row[5]);
                $frm.find("input[name='volume']").val(row[6]);

                $("#popup-dialog-crud").dialog({ title: "Edit Record (" + (rowIndx + 1) + ")", buttons: {
                    Update: function () {
                        //update row.
                        var row = [];
                        row[0] = $frm.find("input[name='company']").val();
                        row[1] = $frm.find("input[name='symbol']").val();
                        row[3] = $frm.find("input[name='price']").val();
                        row[4] = $frm.find("input[name='change']").val();
                        row[5] = $frm.find("input[name='pchange']").val();
                        row[6] = $frm.find("input[name='volume']").val();

                        $grid.pqGrid('updateRow', { rowIndx: rowIndx, row: row, checkEditable: false });

                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
                }).dialog("open");
            }
        }
        //append Row
        function addRow() {

            var $frm = $("form#crud-form");
            $frm.find("input").val("");

            $("#popup-dialog-crud").dialog({ title: "Add Record", buttons: {
                Add: function () {
                    var row = [];
                    //save the record in DM.data.
                    row[0] = $frm.find("input[name='company']").val();
                    row[1] = $frm.find("input[name='symbol']").val();
                    row[3] = $frm.find("input[name='price']").val();
                    row[4] = $frm.find("input[name='change']").val();
                    row[5] = $frm.find("input[name='pchange']").val();
                    row[6] = $frm.find("input[name='volume']").val();

                    $grid.pqGrid('addRow', { rowData: row });
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
            });
            $("#popup-dialog-crud").dialog("open");
        }
        //delete Row.
        function deleteRow() {
            var rowIndx = getRowIndx();
            if (rowIndx != null) {
                $grid.pqGrid("deleteRow", { rowIndx: rowIndx });
                $grid.pqGrid("setSelection", { rowIndx: rowIndx });
            }
        }
        function getRowIndx() {
            var arr = $grid.pqGrid("selection", { type: 'row', method: 'getSelection' });
            if (arr && arr.length > 0) {
                return arr[0].rowIndx;                                
            }
            else {
                alert("Select a row.");
                return null;
            }
        }
    });
        
</script>    
</head>
<body>

<div id="grid_crud" style="margin:auto;"></div>

<div id="popup-dialog-crud" style="display:none;">
<form id="crud-form">
    <table align="center">
    <tbody><tr>
    <td>Company Name:</td>
    <td><input type="text" name="company"></td>
    </tr>
    <tr>
    <td>Symbol:</td>
    <td><input type="text" name="symbol"></td>
    </tr>
    <tr>
    <td>Price:</td>
    <td><input type="text" name="price"></td>
    </tr>
    <tr>
    <td>Change:</td>
    <td><input type="text" name="change"></td>
    </tr>
    <tr>
    <td>%Change:</td>
    <td><input type="text" name="pchange"></td>
    </tr>
    <tr>
    <td>Volume:</td>
    <td><input type="text" name="volume"></td>
    </tr>
    </tbody></table>
</form>
</div>

</body>

</html>
